.
<template>
  <div class="w100">
    <div class="header w100">
      <img
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/psqcgng0fq0uaqeemeq9xqehbir5akqwbm7bdf7e31-eaaa-41b5-84df-2a23daeffd7e"
        alt=""
      />
      <div class="p">
        <p style="font-size: 0.3rem">潮玩盲盒</p>
        <p style="font-size: 0.2rem">乐享新体验！只为你制造惊喜</p>
      </div>
    </div>
    <div class="input">
      <input @click="search" class="inp" type="text" placeholder="搜索" />
    </div>
    <van-tabs id="tab" v-model="act">
      <van-tab title="推荐">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img
              class="my-swipe-img"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psjlx67r6nlgqi7ezzqlyv4zrhc4y596eb590e7ce8-edd8-43e1-b194-3e25ef9db602"
              alt=""
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              class="my-swipe-img"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psjlx67r6nlgqi7ezzqlyv4zrhc4y596eb590e7ce8-edd8-43e1-b194-3e25ef9db602"
              alt=""
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              class="my-swipe-img"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psjlx67r6nlgqi7ezzqlyv4zrhc4y596eb590e7ce8-edd8-43e1-b194-3e25ef9db602"
              alt=""
            />
          </van-swipe-item>
          <van-swipe-item>
            <img
              class="my-swipe-img"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psjlx67r6nlgqi7ezzqlyv4zrhc4y596eb590e7ce8-edd8-43e1-b194-3e25ef9db602"
              alt=""
            />
          </van-swipe-item>
        </van-swipe>
        <div class="section14 w100">
          <a class="image-text18">
            <img
              class="image_13"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psz40ijex6v7mh9ac3qkygtjtbzxufzosu8e63acdd-6acc-43a1-9db9-00b9a73ae75d"
            />
            <span class="text-group_1">关注福利</span>
          </a>
          <a class="image-text18">
            <img
              class="image_14"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psbtjtc347dxto5afg9va19nhfsmo4mi8o3b570332-f7e6-4539-b24b-4a3ded89b1fc"
            />
            <span class="text-group_10">新手攻略</span>
          </a>
          <a class="image-text18">
            <img
              class="image_15"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps0q2wdj9i7xp8w7kov0917goau7u4fr8y5048a86e-404e-4141-a5ee-41b017efb18a"
            />
            <span class="text-group_11">置换好物</span>
          </a>
          <router-link tag="a" to="../Billboard" class="image-text18">
            <img
              class="image_16"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psnr8lrxw2ndc02ca25zo4ghveqi6ynrx5134a6bd9-291f-412f-96d8-be1321f900a8"
            />
            <span class="text-group_12">欧皇榜单</span>
          </router-link>
          <a class="image-text18">
            <img
              class="image_17"
              referrerpolicy="no-referrer"
              src="https://lanhu.oss-cn-beijing.aliyuncs.com/psj0n31wsv5wcgir0zn1126t0yh9rs9mfxt1f9f22bf-6620-4ce4-be87-10b78a0f8122"
            />
            <span class="text-group_13">提货必看</span>
          </a>
        </div>
        <img
          class="image_18"
          referrerpolicy="no-referrer"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psia1wppuhpvws0ck3zxbsc5yd4v2u23ofdf1755b-c001-441b-87b4-c73c61b6d70a"
        />
        <div class="list">
          <div class="new">
            <p>新人福利</p>
            <span>MORE ></span>
          </div>
          <ul class="product">
            <router-link
              tag="li"
              to="../banner"
              v-for="(v, index) in list"
              :key="index"
            >
              <img v-lazy :src="v.imgurl" alt="" />
              <div>
                <p class="xiang">新人专享</p>
                <span> $ {{ v.price }} </span>
              </div>
            </router-link>
            <li></li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="爆款">
        <ul class="fire">
          <router-link
            tag="li"
            to="../banner"
            v-for="(v1, index1) in list2"
            :key="index1"
          >
            <img v-lazy :src="v1.img" alt="" />
            <div style="font-size: 0.4rem; color: #282828">{{ v1.name }}</div>
            <p style="font-size: 0.25rem; color: #b99b5c">
              拆盒必得盒内其中一件
            </p>
            <div class="fire-price">
              <p style="font-size: 0.3rem">¥{{ v1.price }}</p>
              <p style="font-size: 0.2rem">{{ v1.sales }}人已开盒</p>
            </div>
          </router-link>
          <li>
            <img v-lazy src="" alt="" />
            <div style="font-size: 0.4rem; color: #282828">智能壕电盒</div>
            <p style="font-size: 0.25rem; color: #b99b5c">
              拆盒必得盒内其中一件
            </p>
            <div class="fire-price">
              <p style="font-size: 0.3rem">¥99</p>
              <p style="font-size: 0.2rem">12w+人已开盒</p>
            </div>
          </li>
          <li>
            <img v-lazy src="" alt="" />
            <div style="font-size: 0.4rem; color: #282828">华为全家桶</div>
            <p style="font-size: 0.25rem; color: #b99b5c">
              拆盒必得盒内其中一件
            </p>
            <div class="fire-price">
              <p style="font-size: 0.3rem">¥76</p>
              <p style="font-size: 0.2rem">1288人已开盒</p>
            </div>
          </li>
        </ul>
      </van-tab>
      <van-tab title="数码">内容 3</van-tab>
      <van-tab title="游戏">内容 4</van-tab>
      <van-tab title="美妆">内容 5</van-tab>
      <van-tab title="潮牌">内容 6</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { HmoesNewPeopleAPI } from "@/api/homes";
import { fireAPI } from "@/api/homes-fire";

export default {
  data() {
    return {
      value: "",
      act: 0,
      list: [],
      list2: [],
    };
  },
  methods: {
    search() {
      this.$router.push("../search");
    },
  },
  async created() {
    const res = await HmoesNewPeopleAPI;
    console.log(res);
    this.list = res.data;
    const res1 = await fireAPI;
    console.log(res1);
    this.list2 = res1.data;
  },
};
</script>
<style scoped>
.header {
  height: 1.5rem;
  display: flex;
  align-items: center;
}
img {
  width: 12%;
  height: 1rem;
  margin: 0 0.1rem;
}
.p {
  width: 70%;
  height: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.p p {
  height: 0.4rem;
  line-height: 0.4rem;
}
.input {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(237, 236, 236);
}
.inp {
  width: 95%;
  height: 0.8rem;
  font-size: 0.4rem;
  text-align: center;
  border: none;
}
.van-tab {
  height: 0.8rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.2rem;
  height: 2.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-swipe-img {
  width: 80%;
  height: 80%;
}
.section14 {
  height: 1.4rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.image-text18 {
  width: 1.01rem;
  height: 1.38rem;
  margin-top: 0.02rem;
}

.image_13 {
  width: 0.99rem;
  height: 1rem;
  margin-left: 0.01rem;
}

.text-group_1 {
  width: 1.01rem;
  height: 0.25rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.26rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.26rem;
  margin-top: 0.13rem;
}
.image_14 {
  width: 1rem;
  height: 1rem;
  margin-left: 0.01rem;
}

.text-group_10 {
  width: 1.03rem;
  height: 0.25rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.26rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.26rem;
  margin-top: 0.11rem;
}
.image_15 {
  width: 1rem;
  height: 1rem;
}

.text-group_11 {
  width: 1.01rem;
  height: 0.25rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.26rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.26rem;
  margin-top: 0.14rem;
}
.image_16 {
  width: 1rem;
  height: 1rem;
  margin-left: 0.01rem;
}
.text-group_12 {
  width: 1.02rem;
  height: 0.26rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.26rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.26rem;
  margin-top: 0.14rem;
}
.image_17 {
  width: 1.01rem;
  height: 1rem;
  margin-left: 0.01rem;
}

.text-group_13 {
  width: 1.03rem;
  height: 0.26rem;
  color: rgba(0, 0, 0, 1);
  font-size: 0.26rem;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 0.26rem;
  margin-top: 0.11rem;
}
.image_18 {
  z-index: 77;
  width: 6.85rem;
  height: 1.93rem;
  margin: 0.35rem 0 0 0.35rem;
}
.list {
  width: 100%;
}
.new {
  width: 100%;
  height: 0.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.01rem solid black;
}
.new p {
  margin-left: 0.2rem;
  font-size: 0.3rem;
  font-weight: 700;
}
.new span {
  margin-right: 0.2rem;
  font-size: 0.25rem;
}
.product {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.fire {
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.fire li {
  width: 40%;
  height: 4rem;
  margin-top: 0.2rem;
}
.product li {
  width: 30%;
  height: 2.2rem;
  margin-top: 0.2rem;
  background-image: linear-gradient(#e66465, #9198e5);
}
.fire li img {
  width: 100%;
  height: 2.4rem;
  margin: 0 auto;
}
.product li img {
  width: 100%;
  height: 1.6rem;
  margin: 0 auto;
}
.fire-price {
  width: 100%;
  height: 0.8rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.product li div {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.xiang {
  width: 50%;
  background-color: red;
  color: white;
}
</style>
>
